<template>
  <div class="box">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref, computed, markRaw, watch } from 'vue'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: null,
      files: []
    }
  },
  methods: {
    add() {
      this.a++
      console.log(`helloworld`)
    }
  },
  mounted() {
    watch(
      () => this.a,
      (newValue) => {
        console.log(`修改了`, newValue)
      }
    )
    this.c = computed(() => {
      return this.a + this.b
    })
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
